Ext.onReady (function(){
	var data = {
        name: 'Jack Slocum',
        company: 'Ext JS, LLC',
        city: 'Cleveland',
        state: 'Ohio'
    };
	
    var p = new Ext.Panel({
        title: '数据',
        width: 300,
        html: '<p>name: "Jack Slocum",</p>'+'<p>company: "Ext JS, LLC",</p>'+'<p>city: "Cleveland",</p>'+"state: 'Ohio'",
        renderTo: document.body
    });
    
    var p = new Ext.Panel({
        title: 'Template',
        width: 300,
        html: '<p>Name: {name}</p>'+'<p>Company: {company}</p>'+'<p>Location: {city}, {state}</p>',
        tbar: [{
            text: '添加 Template',
            handler: function(){

                var tpl = new Ext.Template(
                    '<p>Name: {name}</p>',
                    '<p>Company: {company}</p>',
                    '<p>Location: {city}, {state}</p>'
                );

                tpl.overwrite(p.body, data);
                p.body.highlight('#c3daf9', {block:true});
            }
        }],

        renderTo: document.body
    });

	var dr = new Ext.FormPanel({
      labelWidth: 125,
      frame: true,
      title: 'Date Range',
	  bodyStyle:'padding:5px 5px 0',
	  width: 350,
      defaults: {width: 175},
      defaultType: 'timefield',
      items: [{
        fieldLabel: 'Start Date',
        name: 'startdt',
        id: 'startdt',
        vtype: 'daterange',
        endDateField: 'enddt' // id of the end date field
      },{
        fieldLabel: 'End Date',
        name: 'enddt',
        id: 'enddt',
        vtype: 'daterange',
        startDateField: 'startdt' // id of the start date field
      }]
    });

    dr.render('dr');
});